<template>
    <div>
        <mt-swipe>
            <mt-swipe-item v-for="(item,i) in pic" :key="item.img"><a href="#"><img :src="item.img" alt=""></a></mt-swipe-item>
        </mt-swipe>
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <img src="../../images/menu1(1).png" alt="">
                    <div class="mui-media-body">Home</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <img src="../../images/menu2.png" alt="">
                    <div class="mui-media-body">Email</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <img src="../../images/menu3.png" alt="">
                    <div class="mui-media-body">Chat</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                   <img src="../../images/menu4.png" alt="">
                    <div class="mui-media-body">location</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <img src="../../images/menu5.png" alt="">
                    <div class="mui-media-body">Search</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <img src="../../images/menu6.png" alt="">
                    <div class="mui-media-body">Phone</div></a></li>
        </ul>
    </div>
</template>
<script>
    import { Toast } from 'mint-ui';
    export default {
        data(){
            return {
                msg:'info',
                pic:[]
            }
        },
        methods:{
            showInfo(){
                Toast(this.msg);
            },
            getlunbo(){
                this.$http.get('http://vue.studyit.io/api/getlunbo').then((res)=>{
                    this.pic = res.body.message;
                })
            }
        },
        created(){
            this.getlunbo();
        }
    }
</script>
<style scoped lang="less">
.mint-swipe{
    height:200px;
    .mint-swipe-item{
        a{
            width:100%;
            img{
                width:100%;
                height:100%;
            }
        }
    }
}
.mui-table-view{
    background-color:#fff;
    border:none;
    img{
        width:60px;
        height:60px;
    }
}

.mui-grid-view.mui-grid-9 .mui-table-view-cell{
    border:none;
}
</style>